import { Layout, Menu, Breadcrumb, Card, Row, Col, List, Avatar, Space, Typography, Divider, Tag, Radio } from 'antd';
import { MessageOutlined, LikeOutlined, StarOutlined } from '@ant-design/icons';
import styles from './index.less';
import logo from '../../assets/logo.svg';
import { Link, connect } from 'umi';
import UploadUtil from '../UploadUtil'
import moment from 'moment'
import HeaderPage from './header'
import nopic from '../../assets/nopic.png'
import Withline from '../components/Withline'

const { Header, Content, Footer } = Layout;
const { Title, Paragraph, Text } = Typography;
class ViewPage extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            loading: true,
            pageSize: 5,
            pageIndex: 1,
            datas: {
                tCategory: {},
                tUser: {},
            },
            size: '18'
        }
    }
    componentDidMount() {
        if (this.props.location.query.id) {
            this.getData(this.props.location.query.id);
        }
    }
    getData = (id) => {
        const { dispatch } = this.props;
        if (id > 0) {
            dispatch({
                type: 'Article/getById',
                payload: { id },
            }).then(() => {
                var result = this.props.Article.response.result;
                this.setState({ datas: result, loading: false });
            });
        }
    }
    handleSizeChange = e => {
        this.setState({ size: e.target.value });
    };
    render() {
        const { datas, loading, size } = this.state;
        return (
            <Layout className="layout">
                <HeaderPage SelectedKeys="2" />
                <Content style={{ padding: '0 50px', marginTop: 64 }}>
                    <Breadcrumb style={{ margin: '16px 0' }}>
                        <Breadcrumb.Item>Home</Breadcrumb.Item>
                        <Breadcrumb.Item><Link to="/web">里里外外</Link></Breadcrumb.Item>
                        <Breadcrumb.Item>{datas.title}</Breadcrumb.Item>
                    </Breadcrumb>
                    <Row gutter={[16, 16]}>
                        <Col xs={24} sm={24} md={9} lg={8} xl={8}>
                            <Card loading={loading}>
                                <Card.Meta
                                    avatar={
                                        <Avatar src={UploadUtil.imgServ + datas.tUser.avater} />
                                    }
                                    title={datas.tUser.name}
                                    description={datas.tUser.emailAddress}
                                />
                                <div style={{ marginTop: 16, marginLeft: 48 }}>入住于 {moment(datas.tUser.creationTime).format('YYYY-MM-DD HH:MM')}</div>
                            </Card>
                            <Card title="能力图谱" style={{ padding: 0, marginTop: 16 }}><Withline /></Card>

                        </Col>
                        <Col xs={24} sm={24} md={15} lg={10} xl={16}>
                            <Card loading={loading}>
                                <Title level={3}>{datas.title}</Title>
                                <Divider />
                                <Radio.Group value={size} onChange={this.handleSizeChange}>
                                    <Radio.Button value="18">大</Radio.Button>
                                    <Radio.Button value="14">中</Radio.Button>
                                    <Radio.Button value="10">小</Radio.Button>
                                </Radio.Group>
                                <Divider type="vertical" />
                                作者：{datas.tUser.name}
                                <Divider type="vertical" />
                                <Tag color="blue">{datas.tCategory.categoryName}</Tag>
                                <Divider type="vertical" />
                                发布于 {moment(datas.creationTime).fromNow()}
                                <Divider type="vertical" />
                                <Tag color="green">{datas.tags}</Tag>
                                <Divider />
                                <Paragraph><Tag>摘要</Tag>{datas.summary}</Paragraph>
                                <div dangerouslySetInnerHTML={{ __html: datas.contents }} style={{ fontSize: this.state.size + 'px' }} />
                                <Divider />
                                <Paragraph>发布于 {moment(datas.creationTime).format('YYYY-MM-DD HH:MM:SS')}
                                    <Divider type="vertical" />
                                    {datas.lastModificationTime ? moment(datas.lastModificationTime).fromNow() : "无"}修改</Paragraph>
                            </Card>
                        </Col>
                    </Row>

                </Content>
                <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
            </Layout>
        )
    }
}

export default connect(({ user, CrudModel, Module, Article }) => ({
    currentUser: user.currentUser,
    response: CrudModel.response,
    current: Module.current,
    Article,
}))(ViewPage);